<template>
  <fieldset>
    <legend>计数器</legend>
    <button @click="DECREMENT">-</button>
    &nbsp;
    <span>{{ num }}</span>
    &nbsp;
    <!-- <button @click="$store.commit('INCREMENT')">+</button> -->
    <button @click="INCREMENT(100)">+</button>
    <h3>{{ reverseMsg }}</h3>
    <button @click="GET_PRODUCTS">点击获取购物车内容</button>
    <ul>
      <li v-for="(it, i) in products" :key="i">{{ it.title }}</li>
    </ul>
  </fieldset>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      dd: this.$store.state.num,
    };
  },
  mounted() {
    console.log(this.$store.state.num);
    setTimeout(() => {
      this.$store.state.num = 200;
    }, 2000);
  },
  computed: {
    ...mapState(["name", "num", "msg", "products"]),
    ...mapGetters(["reverseMsg"]),
  },
  methods: {
    ...mapMutations(["DECREMENT", "INCREMENT", "PRODUCTS"]),
    ...mapActions(["GET_PRODUCTS"]),
  },
};
</script>
